<!doctype>
<html>
<head>
	<style>
		body{
			margin: 0;
		}
		.container{
			width: 980px;
			background: #ffffff;
			margin: 0 auto;
		}

		.banner{
			height: 200px;
			background: url(img/logo.jpg);
			background-size: cover;
			box-shadow:0px 1px 5px #292929;
			margin-bottom: 10px;

		}

		.banner:hover{
			background: url(img/logo1.jpg);

		}

		.img1{
			height: 200px;
			width: 200px;
			background: url(img/logo2.jpg);
			background-size: cover;
			box-shadow:0px 1px 5px #292929;
			margin-bottom: 10px;
		}
		.img1:hover{
			background: url(img/cue.jpg);
		}

		.img2{
			height: 200px;
			width: 200px;
			background: url(img/logo3.jpg);
			background-size: cover;
			box-shadow:0px 1px 5px #292929;
			margin-bottom: 10px;
		}
		.img2:hover{
			background: url(img/tenglin.jpg);
		}
		.img3{
			height: 200px;
			width: 200px;
			background: url(img/images.jpg);
			background-size: cover;
			box-shadow:0px 1px 5px #292929;
			margin-bottom: 10px;
		}
		#menu{

			margin-bottom: 10px;
			position: relative;
			background:url(img/bg4.jpg);
			display: inline-block;
			width:200px;
			float: left;
			z-index: 100;

		}

		#menu img{
			margin-top: 10px;
			border-radius: 3px;
			width: 100%;

			margin-bottom: 10px;
		}
		#menu ul{
			background: #f9f9f9;
			padding: 0;
			margin: 0;
			z-index: 100;

		}

		#menu ul li{

			display: block;
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 16px;
			color:#444;
			font-weight: bolder;
			border-bottom: 1px solid rgb(148,187,255);
			cursor: pointer;
		}
		#menu ul li:hover{
			background: #e9e9e9;
		}

		#menu ul li:hover ol{
			display: block;
		}

		#menu ol{
			display: none;
			z-index: 100;
			margin-top: -50px; 
			margin-left: 200px;
			width: 160px;
			padding: 0;
		}
		#menu ol li{
			height: 50px;
			line-height: 50px;
			background: #effcfc;
			opacity: 0.85;
			font-style: italic;
		}

		.content{
			width:780px;
			padding: 10px;
			margin-left:200px; 
			background:url(img/bg4.jpg);
		}
		.content h1{
			text-align: center;
		}
		.content h2{
			text-align: center;
			background:url(img/bg2.gif);
			opacity: 1;
			box-shadow:0px 1px 5px #292929;
			margin-bottom: 10px;
			
		}
		.content p{
			text-indent:2em;
			font-size: 14px;
			font-color: #555; 
			font-family: "Arial Narrow",sans-serif,"宋体";
		}

		.content img{
			display: block;
			margin: 10px auto;
			border-radius: 3px;
		}
		.content embed{
			margin: 10px auto;
			margin-left: 40px;
		}
		.tab{
			display: none;
		}

		.tab:first-child{
			display: block;
		}

		.tab iframe{
			width:760px;
			border: none;
			height: 600px;
		}

		footer{
			margin-top:20px;
			color:#888; 
			font-size: 11px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
		function refreshHeight(obj){
			// var win=obj; 
			// if (document.getElementById) { 
			// 	if (win && !window.opera) 
			// 	{ 
			// 		if (win.contentDocument && win.contentDocument.body.offsetHeight) 
			// 			win.height = win.contentDocument.body.offsetHeight; 
			// 		else if(win.Document && win.Document.body.scrollHeight) 
			// 			win.height = win.Document.body.scrollHeight; 
			// 	} 
			// } 
		}
	</script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<TITLE>★My_Web★</TITLE>
</head>
<body>
	<div class="container">
		<a href="html/page.html"><div class="banner">
			
		</div></a>
		<div id="main">
			<div id="menu">
				<ul>
					<li> 散文诗
						<ol>
							<li id="menu11">故乡</li>
							<li id="menu12">生活像一首歌</li>
							<li id="menu13">再别康桥</li>
							<li id="menu14">致橡树</li>
						</ol>
					</li>
					<li>图片集
						<ol>
							<li id="menu21">风景</li>
							<li id="menu22">花朵</li>
							<li id="menu23">考拉</li>
							<li id="menu24">葵花</li>
							<li id="menu25">城堡</li>
						</ol>
					</li>
					<li id="menu31">Flash作业</li>
					<li id="menu41">关于</li>
				</ul>
				<br/>
				<a href="html/page.html">
				<div class="img1">
				</div>
			</a>
				<div class="img2">
				</div>
				<div class="img3">
				</div>
			</div>
			<div class="content">
			</div>
		</div>
	</div>

	<footer>
		<center>
			<a name ="1">Copyright © 2013 - 11 - 22 Tan. All Rights Reserved</a>
			<br/>
			<br/>
			版权所有
		</center>
	</footer>
	<script type="text/javascript">
		var htmls = []
		var jsonp = function(index,content){
			htmls[index] = content;
		}
	</script>
	<script type="text/javascript" src="html/tab11.txt"></script>
	<script type="text/javascript" src="html/tab12.txt"></script>
	<script type="text/javascript" src="html/tab13.txt"></script>
	<script type="text/javascript" src="html/tab14.txt"></script>
	<script type="text/javascript">
		$('#menu ul li').on('click',function(event){
			var id = $(event.target).attr('id')
			if(!id){
				return;
			}
			id = id.replace('menu','');
			$('.content').html(htmls[id])
		});
		$('.content').html(htmls[11])

		jsonp(21,'<img src="img/hyl1.jpg"/>')
		jsonp(22,'<img src="img/hyl2.jpg"/>')
		jsonp(23,'<img src="img/hyl3.jpg"/>')
		jsonp(24,'<img src="img/hyl4.jpg"/>')
		jsonp(25,'<img src="img/hyl5.jpg"/>')
		jsonp(31,'<embed src="img/clannad.mp4"width="700"height="500"><img src="img/home.jpg"/>')
		
		/*<object width="302" height="302"
		param name=movie value="img/a3.swf">  
		 <param name=quality value=high>  
		 <embed src="img/a3.swf" quality=high pluginspage="#" width="600" height="400">
		 </embed> 
		  </object>*/
		  
		jsonp(41,'<h1>作者</h1><img src="img/author1.jpg"/><img src="img/author.jpg"/><br/>')
		// $('#menu ul li').hover(function(e){
		// 	$('ol',e.target).show();
		// },function(e){
		// 	$('ol',e.target).hide();
		// });
	</script>
</body>
</html>